<?php
echo $javascript->link(array('autocomplete/subject/jquery.autocomplete', 'autocomplete/jquery.tokeninput', 'tag-option/jquery.optionTree', 'front/jquery-ui-1.8.16.custom.min'));
echo $this->Html->css(array('autocomplete/subject/style', 'autocomplete/token-input-facebook', 'autocomplete/token-input', 'slider/jquery-ui-1.8.16.custom'));
?>
<style type="text/css">
    select.vertical {
        display: block;
    }

</style>
<script type="text/javascript">
    $(function() {
        var options = {
            empty_value:null,
            indexed: true,  // the data in tree is indexed by values (ids), not by labels
            on_each_change: 'tags', // this file will be called with 'id' parameter, JSON data must be returned
            choose: function(level) {
                return 'Choose level ' + level;
            },
            loading_image: '<?php echo $this->base . "/app/webroot/img/ajax-load.gif"; ?>',
            show_multiple: false, // if true - will set the size to show all options
            choose: '' // no choose item
        };

        var displayParents = function() {
            var labels = []; // initialize array
            $(this).siblings('select') // find all select
            .find(':selected') // and their current options
            .each(function() { labels.push($(this).text()); }); // and add option text to array
            // $("<div >").html( labels.join(' > ')+"<a class='delete' href='#'> X</a>").appendTo('#demo7-result');  // and display the labels
            if($(this).find(':selected').value!='0'){
                $('#demo7-result').css("background-color","#BAF598");
                $('#demo7-result').css("border","1px solid");
                $('#demo7-result').html($('<div class="tag_name">').text( labels.join(' > '))); 
                //$('#demo7-result').html($('<div >').text( labels.join(' >')));  //commented on 2 sept
            }
        }
  
        $.getJSON('tags?id=2', function(tree) { // initialize the tree by loading the file first
            $('input[id=demo7]').optionTree(tree, options).change(displayParents);
        
        
        
        });
        
       
 
        $('#more ').live('click',function(){
          
            //alert($('div[id|="#tag"').bind(length));
            //alert($('input[id=demo7]').lenght);
            if($('input[id=demo7]').val()!=''){
                $('#tagpool').append('<div id="'+$('input[id=demo7]').val()+'" class="tag_container">'+$('#demo7-result').html()+"<div class='remove_tag'>X</div><div class='clearfix'></div><div class='edit_tag'>Edit</div><input type='hidden' name='tag_ids[]' value='"+$('input[id=demo7]').val()+"'/></div>");
                $('#tagpool').append($('#attributes').html());
                $(".tagwrapper").css("background","#EDFFED");
                $(".tagwrapper").css("border","1px solid #999");
                $("#attributes").empty();
                $('#error-message').empty();
                $("#attributes").css("background","");
                $("#attributes").css("border","");
                $("#demo7-result").empty();
                $('#demo7-result').css("background-color","");
                $('#demo7-result').css("border","none");
                $.getJSON('tags?id=2', function(tree) { // initialize the tree by loading the file first
                    $('input[id=demo7]').optionTree(tree, options).change(displayParents);
                });
            }
            //$('#tag_values').html($('#tag_values').html()+','+$('#demo7').val());
            $(".remove_tag").bind('click',function(){
                //alert($($($(this).prev()).parent()).attr("id"));
                var currentID=$($(this).prev().parent()).attr("id");
                //alert(currentID);
                $('#'+currentID).remove();
            
             
            });
        });
        
        /*********************** Edit tag chain   **********************/
       
        $(".edit_tag").live('click',function(){
            //alert($($($(this).prev()).parent()).attr("id"));
            var currentID=$($(this).parent()).attr("id");
            //alert($('#'+currentID).remove().html());
            $('#demo7-result').append($('#'+currentID).remove().html());
            //$('#'+currentID).remove();
            
            
            $.ajax({
                url: "tag",
                global: false,
                type: "POST",
                data: {id : currentID },
                dataType: "html",
                async:false,
                success: function(response){
                    x=response;
                           
                }
            }
        );
            //alert(currentID);  
            var t=x.split(',');
            var options = {
                empty_value: null,
                indexed: true,  // the data in tree is indexed by values (ids), not by labels
                on_each_change: 'tags', // this file will be called with 'id' parameter, JSON data must be returned
                choose:'',
                preselect: {'data[Subject][tag_ids]':t}
            };

            var displayParents = function() {
                var labels = []; // initialize array
                $(this).siblings('select') // find all select
                .find(':selected') // and their current options
                .each(function() { labels.push($(this).text()); }); // and add option text to array
                $('<div>').text(this.value + ':' + labels.join(' > ')).appendTo('#demo5-result');  // and display the labels
            }

            $.getJSON('tags', function(tree) { // initialize the tree by loading the file first
                $('#demo7').optionTree(tree, options).change(displayParents);
                
            });
            var checkpool=$('#tagpool').html();
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
            if(checkpool==''){
                $(".tagwrapper").css("background","");
                $(".tagwrapper").css("border","");
            }
            
        });
        
        
        /*********************Edit Tag ends**********************/
         
         
    });
      
</script>


<table id="table" width="100%" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <?php echo $this->Form->Create('Subject', array('enctype' => 'multipart/form-data')); ?>
            <table cellpadding="10" cellspacing="10">
                <tr>
                    <td id="label" width="110px">Subject<span class="required_field">*</span></td>
                    <td><?php echo $this->Form->input('Subject.subject', array('label' => '', 'id' => 'title', 'size' => '50')); ?><div id="error" style="color:red; font-size: 14px;margin: 3px 0 0 446px;"></div></td>
                <script type="text/javascript">
                    $(document).ready(function() {
                              
                              
                        $("#title").tokenInput("<?php echo $this->base; ?>/admin/Subjects/synonyms",{
                            theme: "facebook",
                            preventDuplicates: true,
                            queryParam: "search",
                            searchDelay: 700,
                            tokenLimit: 1,
                            minChars: 2,
                            noResultsText: "Subject Already added.",
                            
                            onAdd: function (item) {
                                $.ajax({
                                    url:'<?php echo $this->base; ?>/Subjects/get_redirects',
                                    type:'POST',
                                    data:{subject:item},
                                    success:function(response){
                                         //response.join(',');
                                         $('#redirect').val(response);
                                        // $('#redirect-div').fadeIn('700').text(response);
                                      //alert(response);
                                    }
                                });
                                
                                
                            },
                            onDelete: function (item) {
                            $('#redirect').val('');
                               // $('#redirect-div').fadeOut('700');
                            }
                        });
                    });
                </script>
    </tr>

    <tr>
        <td id="label"  >Specifier</td>
        <td><?php echo $this->Form->input('Subject.desc', array('label' => '', 'type' => 'text', 'id' => 'specifier','size'=>'42')); ?></td>
    </tr>

    <tr>
        <td id="label"  >Synonyms</td>
        <td><div id="redirect-div">
                
            </div>
        <?php 
        //echo $this->Form->input('synonyms',array('label'=>'','size'=>'42'));
        echo $this->Form->input('redirects', array('label' => '','type'=>'textarea','cols'=>'56','rows'=>'10', 'id' => 'redirect')); ?>* In CSV(e.g Happy,Jolly) formate</td>
    </tr>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#specifier').live('focusout',function(){
                var title=$('#title').val();
                var specifier=$(this).val();
               // alert(title);
                if(title!=''){
                    $.ajax({
                        url: "subject_suggestion",
                        global: false,
                        type: "GET",
                        data: {title: title,specifier: specifier },
                        dataType: "html",
                        async:false,
                        success: function(response){
                       
                            if(response){
                                $('#error').css("color","red");
                                $('#error').text('Subject Already Added');
                            }else{
                                $('#error').empty();
                            }
                        }
                    
                    });
                }
            });
        });
    </script>
    <tr><td>&nbsp;</td><td><div id="tagpool" class="tagwrapper"></div></td></tr>
    <tr>
        <td id="label"  >Tag<span class="required_field">*</span></td>
        <td style="margin-right: 20px;"><div><?php echo $this->Form->input('Subject.tag_ids', array('label' => '', 'id' => 'demo7', 'type' => 'hidden')); ?><span id="more" class="mybutton"><a href="#">Save</a></span><div id="error-message" class="error-message"></div><div id="tag_values"></div></div>
            <div class="results" id="demo7-result"><div  id="attributes"></div></div>                   
        </td>
    </tr>
    <tr>
        <td id="label" >Image<span class="required_field">*</span></td>
        <td><?php  echo $this->Form->input('Subject.image', array('label' => '', 'type' => 'file', 'id' => 'image')); ?><div id="missing_image" class="error-message"></div></td>
    </tr>      
    <tr>
        <td id="label" >Adjectives</td>
        <td><div style="margin-left: 10px"><?php echo $this->Form->input('Subject.adjective_ids', array('label' => '', 'id' => 'demo-input-facebook-theme')); ?>   

                <script type="text/javascript">
                    $(document).ready(function() {
                        $("#demo-input-facebook-theme").tokenInput("adjectives", {
                            theme: "facebook",
                            queryParam: "q",
                            preventDuplicates: true
                        });
                    });
                </script>
            </div>
        </td>
    </tr> 
    <tr>
        <td id="label">17+ &nbsp;&nbsp;&nbsp;?</td>
        <td><?php echo $this->Form->input('17+', array('label' => '', 'type' => 'checkbox')); ?></td>
    </tr>

    <tr>
        <td id="label">Rate It<span class="required_field">*</span></td>
        <td><div class="meter-div">
                <!-- Slider -->

                <input type="hidden" id="amount" value="70" name="rating" style="border:0; color:#f6931f; font-weight:bold;" />

                <div id="slider-range-min" style="width:500px;"> </div>
            </div></td>
    </tr>
    <tr><td colspan="2">&nbsp;</td></tr>
</table>
<div style="margin-top:50px; text-align: center;"> <?php echo $this->Form->end(array('label' => 'Add', 'class' => 'mybutton')); ?><div style="float:right; font-size: 18px;"><span class="required_field">*</span> Required Fields</div></div>
</td>
</tr>
</table>
<script language="javascript">
    $(document).ready(function() {
        $( "#slider-range-min" ).slider({
            range: "min",
            value: 0,
            min: 0,
            max: 100,
            slide: function( event, ui ) {
                            
                $( ".ui-slider-handle" ).text( ui.value );
				
                //add color class
                
				
            }
        });
        $( ".ui-slider-handle" ).text($( "#slider-range-min" ).slider( "value" ) );
        //add color class
        if('ui.value'<='25' ){
            $( ".ui-slider-handle" ).addClass('low_value');
                                      
        }else if('ui.value'<='50'){
            $( ".ui-slider-handle" ).addClass('medium_value');
        }
				  
    });
    $('#SubjectAdminAddForm').live('submit',function(){
        //alert($('#error').html());
        var error='0';
        if($('#error').html()==''){
            var title=$('#title').val();
                var specifier=$('#specifier').val();
               // alert(title);
                if(title!=''){
                    $.ajax({
                        url: "subject_suggestion",
                        global: false,
                        type: "GET",
                        data: {title: title,specifier: specifier },
                        dataType: "html",
                        async:false,
                        success: function(response){
                       
                            if(response){
                                $('#error').css("color","red");
                                $('#error').text('Subject Already Added');
                                error=1;   
                            }else{
                                $('#error').empty();
                                error=0;
                            }
                        }
                    
                    });
                }
         
        }
       // alert(error);
        if($('#image').val()==''){
            $('#missing_image').fadeIn(100);
            $('#missing_image').text('Upload an Image first.').delay(5000).fadeOut(900);
            error=1;
        }
        
        
        $('input[name=rating]').val($( "#slider-range-min" ).slider( "value" ));
        if( $('#title').val()==''){
            $('#error').fadeIn(100);
            $('#error').text('Required').delay(5000).fadeOut(900);
            
            error=1;

        }
        
        if( $('#tagpool').text()==''){
            $('#error-message').fadeIn(100);
            $('#error-message').text('Add atleast one tag to the Subject').delay(5000).fadeOut(900);
            error=1;
            

        }
        
        if(error=='1'){
            return false;
        }
        if($('input[name=rating]').val()=='0'){
            if(confirm('Are you sure you want to rate this subject a 0 ?')){
                return true;
            }else{
                return false;        
            }
        }
        
    });
        
</script>


